<template>
  <view>
    <view class="user-info">
      <image class="bg-img" src="../../static/my-background-img.png" mode="widthFix"></image>
      <view class="user" v-if="wxuserinfo.avatarUrl">
        <image class="avatar" :src="wxuserinfo.avatarUrl" mode=""></image>
        <view class="info">
          <button class="name">{{wxuserinfo.nickName}}</button>
          <view class="phone">{{userinfo.userName}}</view>
        </view>
      </view>
      <view class="user" v-else @click="login()">
        <image class="avatar" :src="avatar" mode=""></image>
        <view class="info">
          <button class="name">登录</button>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="box" @click="order">
        <view class="left">
          <image class="order" src="@/static/order.png" mode="widthFix"></image>
          <text>我的订单</text>
        </view>
        <view class="right">
          <view v-if="total != ''" class="tips">{{total}}个进行中</view>
          <image class="more" src="@/static/more.png" mode=""></image>
        </view>
      </view>
      <view class="box" @click="goPage('/pages/my/package/package')">
        <view class="left">
          <image class="collection" src="@/static/allRead.png" mode="widthFix"></image>
          <text>我的套餐</text>
        </view>
        <image class="more" src="@/static/more.png" mode=""></image>
      </view>
      <view class="box" @click="myCollection">
        <view class="left">
          <image class="collection" src="@/static/collection.png" mode="widthFix"></image>
          <text>我的收藏</text>
        </view>
        <image class="more" src="@/static/more.png" mode="widthFix"></image>
      </view>
      <view class="box" @click="goPage('/pages/my/help/index')">
        <view class="left">
          <image class="collection" src="@/static/help.png" mode="widthFix"></image>
          <text>帮助</text>
        </view>
        <image class="more" src="@/static/more.png" mode="widthFix"></image>
      </view>
      <!-- <view class="box" @click="phone">
        <view class="left">
          <image class="customer-service" src="../../static/customer-service.png" mode=""></image>
          <text>客服</text>
        </view>
        <view class="right">
          <image class="more" src="../../static/more.png" mode=""></image>
        </view>
      </view> -->
    </view>
    <!-- 授权手机号弹窗 -->
    <uni-popup ref="popup" type="center" :animation="false" :mask-click="false">
      <view class="content-view">
        <uni-card :border="false">
          <view class="popup-info">
            <view class="popup-title">绑定手机号</view>
            <view class="popup-content">请先绑定手机号再进行此操作</view>
            <button class="popup-button" type="default" open-type="getPhoneNumber"
              @getphonenumber="getphoneNumber">绑定手机号</button>
          </view>
        </uni-card>
      </view>
    </uni-popup>
    <tabBar :current="4"></tabBar>
  </view>
</template>

<script>
  import {
    mapActions,
    mapState
  } from 'vuex';
  import tabBar from "@/components/tabBar.vue";

  export default {
    components: {
      tabBar: tabBar
    },
    data() {
      return {
        phonenumber: '',
        avatar: require('../../static/logo.png'),
        username: {
          name: '登录',
          status: 0
        },
        total: '',
        code: '',
        openId: '',
      }
    },
    computed: {
      ...mapState(['userinfo', 'wxuserinfo'])
    },
    // onShow() {
    //   uni.hideTabBar();
    // },
    created() {
      let token = uni.getStorageSync('token') || null;
      if (token) {
        this.$store.dispatch("updateUserInfo");
      }
    },
    methods: {
      ...mapActions(['Login']),
      // 登录
      login() {
        uni.showModal({
          title: '提示',
          content: '授权登录，是否继续？',
          success: function(res) {
            if (res.confirm) {
              uni.redirectTo({
                url: '/pages/login/login'
              })
            }
          }
        })
      },

      information() {
        let that = this;
        let phone = uni.getStorageSync('phone');
        if (phone) {
          that.phonenumber = phone;
          uni.getStorage({
            key: 'userinfo',
            success(res) {
              that.username.name = JSON.parse(res.data).nickName;
              that.username.status = JSON.parse(res.data).nickName;
              that.avatar = JSON.parse(res.data).avatarUrl;
            }
          })
        }
      },
      // 我的订单跳转
      order() {
        uni.reLaunch({
          url: '../order/order'
        })
      },
      // 我的收藏跳转
      myCollection() {
        uni.navigateTo({
          url: '../myCollection/myCollection'
        })
      },
      // 联系客服
      phone() {
        uni.makePhoneCall({
          phoneNumber: '010-83682266'
        });
      },
      goPage(url) {
        let token = uni.getStorageSync('token') || null;
        if (!token) {
          uni.showModal({
            title: '提示',
            content: '需要先授权登录哦，是否继续？',
            success: function(res) {
              if (res.confirm) {
                uni.navigateTo({
                  url: url
                })
              }
            }
          })
        } else {
          uni.navigateTo({
            url: url
          })
        }
      }
    }
  }
</script>

<style lang="less">
  page {
    background-color: #f7f7f7;
  }

  .user-info {
    display: flex;
    align-items: center;
  }

  .bg-img {
    width: 100%;
    height: 220upx;
    position: relative;
  }

  .user {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0 20upx;
  }

  .avatar {
    width: 100upx;
    height: 100upx;
    border-radius: 50upx;
    border: 2upx solid #fff;
  }

  .info {
    margin-left: 30upx;
    color: #fff;

    button::after {
      border: none;
    }
  }

  .name {
    font-size: 36upx;
    font-weight: bold;
    height: 50upx;
    line-height: 50upx;
    text-align: left;
    padding: 0;
    display: inline;
    background-color: transparent;
    color: #fff;
  }

  .phone {
    margin-top: 10upx;
    font-size: 26upx;
  }

  .list {
    width: 100%;
    background-color: #fff;
    margin-top: 20upx;
  }

  .list .box {
    width: 90%;
    height: 100upx;
    margin: 0 auto;
    padding: 10upx 0;
    line-height: 110upx;
    border-bottom: 2upx solid #f7f7f7;
    font-size: 28upx;
  }

  .order {
    width: 28rpx;
    height: 28rpx;
    margin-right: 14rpx;
  }

  .more {
    width: 15upx;
    height: 25upx;
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .left {
    display: flex;
    align-items: center;
  }

  .collection {
    width: 34rpx;
    height: 34rpx;
    margin-right: 14rpx;
  }

  .customer-service {
    width: 31upx;
    height: 32upx;
    margin-right: 13upx;
  }

  .right {
    display: flex;
    align-items: center;
  }

  .tips {
    margin-right: 20upx;
    color: #c1c1c1;
  }
</style>